<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>发现</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link rel="stylesheet" href="../css/style.css" />
    <style>
      .discover-card {
        margin: 12px 16px;
        background-color: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      }
      .discover-card-img {
        width: 100%;
        height: 180px;
        object-fit: cover;
      }
      .discover-card-content {
        padding: 16px;
      }
      .discover-card-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
      }
      .discover-card-desc {
        font-size: 14px;
        color: #666;
        margin-bottom: 12px;
        line-height: 1.5;
      }
      .discover-card-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .discover-card-category {
        font-size: 12px;
        color: #007aff;
        background-color: rgba(0, 122, 255, 0.1);
        padding: 4px 8px;
        border-radius: 12px;
      }
      .discover-card-date {
        font-size: 12px;
        color: #999;
      }
      .topic-tabs {
        display: flex;
        padding: 12px 8px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none; /* Firefox */
        background-color: white;
        border-bottom: 1px solid #f2f2f2;
        position: sticky;
        top: 50px;
        z-index: 10;
      }
      .topic-tabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
      }
      .topic-tab {
        padding: 6px 12px;
        margin: 0 4px;
        font-size: 14px;
        color: #666;
        border-radius: 16px;
      }
      .topic-tab.active {
        background-color: #007aff;
        color: white;
      }
      .collection-card {
        margin: 12px 16px;
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        height: 140px;
      }
      .collection-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .collection-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px 16px 16px;
        background-image: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.8),
          rgba(0, 0, 0, 0)
        );
        color: white;
      }
      .collection-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 4px;
      }
      .collection-apps {
        font-size: 14px;
        opacity: 0.8;
      }
    </style>
  </head>
  <body>
    <div class="iphone-container">
      <!-- iOS 状态栏 -->
      <div class="status-bar">
        <div class="status-bar-icons">
          <span class="time">14:30</span>
        </div>
        <div class="status-bar-icons">
          <i class="fas fa-signal"></i>
          <i class="fas fa-wifi ml-2"></i>
          <i class="fas fa-battery-full ml-2"></i>
        </div>
      </div>

      <!-- 顶部导航 -->
      <div
        class="flex justify-between items-center px-4 py-2 bg-white sticky top-0 z-10"
      >
        <div class="text-xl font-semibold">发现</div>
        <div>
          <i class="fas fa-search text-gray-600 text-lg"></i>
        </div>
      </div>

      <!-- 话题标签 -->
      <div class="topic-tabs">
        <div class="topic-tab active">推荐</div>
        <div class="topic-tab">游戏</div>
        <div class="topic-tab">应用</div>
        <div class="topic-tab">工具</div>
        <div class="topic-tab">教育</div>
        <div class="topic-tab">摄影</div>
        <div class="topic-tab">音乐</div>
        <div class="topic-tab">视频</div>
        <div class="topic-tab">运动</div>
      </div>

      <!-- 主要内容区域 -->
      <div class="content bg-gray-50 pb-20">
        <!-- 精选合集 -->
        <div class="collection-card">
          <img
            src="https://img.58cdn.com.cn/escstatic/fecar/pmuse/appstore/collection1.jpg"
            alt="应用合集"
            class="collection-image"
          />
          <div class="collection-overlay">
            <div class="collection-title">提升居家生活质量的必备应用</div>
            <div class="collection-apps">12个应用</div>
          </div>
        </div>

        <!-- 发现卡片 -->
        <div class="discover-card">
          <img
            src="https://img.58cdn.com.cn/escstatic/fecar/pmuse/appstore/discover1.jpg"
            alt="发现内容"
            class="discover-card-img"
          />
          <div class="discover-card-content">
            <div class="discover-card-title">如何玩转最新的iOS系统功能</div>
            <div class="discover-card-desc">
              iOS最新版本带来了多项实用功能，本指南帮你快速掌握这些新特性...
            </div>
            <div class="discover-card-meta">
              <div class="discover-card-category">教程指南</div>
              <div class="discover-card-date">今天</div>
            </div>
          </div>
        </div>

        <div class="discover-card">
          <img
            src="https://img.58cdn.com.cn/escstatic/fecar/pmuse/appstore/discover2.jpg"
            alt="发现内容"
            class="discover-card-img"
          />
          <div class="discover-card-content">
            <div class="discover-card-title">
              2023年度游戏大赏：不容错过的精品
            </div>
            <div class="discover-card-desc">
              盘点年度最受欢迎和最具创新性的移动游戏，从MOBA到RPG应有尽有...
            </div>
            <div class="discover-card-meta">
              <div class="discover-card-category">游戏推荐</div>
              <div class="discover-card-date">1天前</div>
            </div>
          </div>
        </div>

        <!-- 应用合集 -->
        <div class="collection-card">
          <img
            src="https://img.58cdn.com.cn/escstatic/fecar/pmuse/appstore/collection2.jpg"
            alt="应用合集"
            class="collection-image"
          />
          <div class="collection-overlay">
            <div class="collection-title">学生党提高学习效率必备应用</div>
            <div class="collection-apps">8个应用</div>
          </div>
        </div>

        <div class="discover-card">
          <img
            src="https://img.58cdn.com.cn/escstatic/fecar/pmuse/appstore/discover3.jpg"
            alt="发现内容"
            class="discover-card-img"
          />
          <div class="discover-card-content">
            <div class="discover-card-title">5款值得尝试的独立开发者应用</div>
            <div class="discover-card-desc">
              这些由独立开发者打造的应用虽小众但功能强大，解决了许多实际问题...
            </div>
            <div class="discover-card-meta">
              <div class="discover-card-category">应用推荐</div>
              <div class="discover-card-date">2天前</div>
            </div>
          </div>
        </div>

        <div class="discover-card">
          <img
            src="https://img.58cdn.com.cn/escstatic/fecar/pmuse/appstore/discover4.jpg"
            alt="发现内容"
            class="discover-card-img"
          />
          <div class="discover-card-content">
            <div class="discover-card-title">提升移动摄影技巧的专业指南</div>
            <div class="discover-card-desc">
              手机摄影已成为艺术表现的重要形式，通过这些技巧让你的照片更专业...
            </div>
            <div class="discover-card-meta">
              <div class="discover-card-category">摄影技巧</div>
              <div class="discover-card-date">3天前</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部导航栏 -->
      <div class="tab-bar">
        <div class="tab-item">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </div>
        <div class="tab-item active">
          <i class="fas fa-compass"></i>
          <span>发现</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-download"></i>
          <span>下载</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-comment-dots"></i>
          <span>消息</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </div>
      </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="../js/main.js"></script>
  </body>
</html>
